<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>客服界面</title>
<link href="/public/admin/css/H-ui.css" rel="stylesheet" type="text/css" />
<link href="/public/admin/css/H-ui.admin.css" rel="stylesheet"
	type="text/css" />
<link type="text/css" rel="stylesheet"
	href="/public/admin/font/font-awesome.min.css" />

</head>
<body>
	<a class="btn btn-success radius r mr-20"
		style="line-height: 1.6em; margin-top: 3px"
		href="javascript:location.replace(location.href);" title="刷新"><i
		class="icon-refresh"></i>刷新</a>
	<hr />
	<div class="main">
		<div class="divname">
			<h5></h5>

		</div>
		<div class="divmsg">
			<div class="msg"></div>
			<div class="fs">
				<textarea id='cton'></textarea>
				<a class="btn btn-success radius r" id="hf"> 回 复 </a>
			</div>
		</div>

	</div>
	<input type="hidden" value="0" id="vid" />
	<style>
.divright {
	width: 700px;
	height: auto;
	margin-left: 20px;
	clear: both;
}

.divright img {
	width: 40px;
	height: 40px;
	margin-right: 30px;
	margin-top: 10px;
	display: block;
	float: right;
}

.divright span {
	width: 620px;
	float: right;
	height: 20px;
	font-size: 12px;
	line-height: 20px;
	margin-right: 10px;
	margin-top: 10px;
	text-align: right;
}

.divleft {
	clear:both;
	width: 700px;
	height: auto;
}

.divleft img {
	width: 40px;
	height: 40px;
	margin-left: 30px;
	margin-top: 10px;
	display: block;
	float: left;
}

.divleft span {
	width: 620px;
	float: left;
	height: 20px;
	font-size: 12px;
	line-height: 20px;
	margin-left: 10px;
	margin-top: 10px;
}

#op {
	font-size: 14px;
	height: auto;
	margin-top: 5px;
	width: auto;
	max-width:600px;
	-webkit-box-shadow: inset 0 0 10px #0CC;
	-moz-box-shadow: inset 0 0 10px #0CC;
	box-shadow: inset 0 0 10px #0CC;
	padding: 5px;
	margin-bottom: 10px;
}

#op2 {
	font-size: 14px;
	height: auto;
	margin-top: 5px;
	width: auto;
	-webkit-box-shadow: inset 0 0 10px #0CC;
	-moz-box-shadow: inset 0 0 10px #0CC;
	box-shadow: inset 0 0 10px #0CC;
	padding: 5px;
	margin-bottom: 10px;
	text-align: left;
	max-width: 600px;
}

.onek {
	-webkit-box-shadow: inset 0 0 10px #0CC;
	-moz-box-shadow: inset 0 0 10px #0CC;
	box-shadow: inset 0 0 10px #0CC;
	width: 170px;
	margin: 5px auto 0;
	height: 50px;
	cursor: pointer;
}

.onek:HOVER {
	-webkit-box-shadow: inset 0 0 10px #CCC;
	-moz-box-shadow: inset 0 0 10px #CCC;
	box-shadow: inset 0 0 10px #CCC;
}

.onek img {
	width: 40px;
	height: 40px;
	margin-top: 5px;
	margin-left: 5px;
	display: block;
	float: left;
}

.onek span {
	display: block;
	width: 110px;
	margin-left: 15px;
	float: left;
	height: 20px;
	font-size: 12px;
	line-height: 20px;
	margin-top: 3px;
}

.main {
	margin-top: 50px;
	margin-left: 30px;
}

.divname {
	overflow-y: scroll;
	width: 200px;
	float: left;
	height: 400px;
	border: 1px solid #ccc;
}

.divmsg {
	width: 800px;
	height: 400px;
	border: 1px solid #ccc;
	float: left;
}

.msg {
	width: 100%;
	height: 300px;
	overflow-y: scroll;
	border-bottom: 2px solid #ccc;
}

.fs {
	width: 100%;
	height: 98px;
}

.fs textarea {
	width: 80%;
	height: 98px;
}

#hf {
	height: 92px;
	text-align: center;
	line-height: 92px;
	width: 16.4%
}
</style>

	<video controls="true" style="display: none;" id="video" name="media">
		<source src="http://data3.huiyi8.com/2015/saraxuss/3/11/1.mp3"
			type="audio/mpeg">
	</video>
</body>
</html>
<script type="text/javascript" src="/public/admin/js/jquery.min.js"></script>
<script>
	$(function(){
		
		var socket = new WebSocket('ws://<?php echo $GLOBALS['C']['IPDIR'];?>'); 
		socket.onopen = function(event) {
			  // 发送一个初始化消息
			var sendMessage={
					'code':1,
					'status':'login',
					'content':null,
					'from':'k',
					'TO':0,
					'pic':'/public/kefu.jpg',
					'nickname':'客服'
			};
			 var str=JSON.stringify(sendMessage);
			  socket.send(str); 
			  // 监听消息
			  	socket.onmessage = function(event) {
			  		 var obj = eval('(' + event.data + ')');
			  		 var vid=$("#vid").val();
    					if(obj.code=='4' && parseInt(obj.TO)==vid){
    						$(".msg").append("<div class='divleft'><img src="+obj.pic+"/><span>"+obj.nickname+"   &nbsp;&nbsp;"+obj.time+"</span><span id='op'>"+obj.content+"</span></div>");
    						$('.msg').scrollTop( $('.msg')[0].scrollHeight );
  						 	 var d=document.getElementById('video');
  						 	d.play();
        				}	
				}; 
				//监听Socket的关闭
				socket.onclose = function(event) { 
				  alert('客服断开连接 请重新打开客服界面！');
				}; 
		};


		$("#hf").click(function(){
			if($("#cton").val()==''){
				return;
			}
			var sendMessage={
					'code':5,
					'status':'kefu',
					'content':$("#cton").val(),
					'from':'k',
					'TO':$("#vid").val(),
					'pic':'/public/kefu.jpg',
					'nickname':'客服'
			};
			var str=JSON.stringify(sendMessage);
			socket.send(str); 
			var myDate = new Date();
			var mytime=myDate.toLocaleTimeString();
			$(".msg").append("<div class='divright'><img src='/public/kefu.jpg' /><span>"+mytime+"  &nbsp;&nbsp;客服</span><span id='op2'>"+$("#cton").val()+"</span></div>");
			$("#cton").val('');
			$('.msg').scrollTop( $('.msg')[0].scrollHeight );
		});
		
		 getdatae();
		//重复获取用户数据
		setInterval(function(){
			 getdatae();
		},10000);
	});


	
function getdatae(){
	$(".divname").html('');
	$(".divname").html(' <h5> </h5>');
	$.ajax({
        type: "POST",
        url: "/index.php?G=admin/ustatus",
        data: '',
        success:function(data){
           	var str=eval("("+data+")");
           	if(str){
           		for(obj in str)
   				{
	    				$(".divname").append("<div class='onek' im="+str[obj].senderID+"><img src='"+str[obj].headpic+"'> <span>"+str[obj].nickname+"</span><span>新消息："+str[obj].count+"</span></div>");
   				};
           	}
           	$(".onek").on('click',function(){
           		var id=$(this).attr('im');
           		$("#vid").val($(this).attr('im'));
           		
           		var src=$(this).find('img').attr('src');
           		//alert(src);
           		var name=$(this).find('span').eq(0).html();
           		getmessage(src,name,id);
             });
        } 
    });
}

function getmessage(src,name,id)
{
	$(".msg").html('');
	$.ajax({
        type: "POST",
        url: "/index.php?G=admin/umessage",
        data: {'id':id},
        success:function(data){
           	var str=eval("("+data+")");
           	if(str){
           		for(obj in str)
   				{
       				
	    			if(str[obj].senderID==id){
		    			$(".msg").append("<div class='divleft'><img src='"+src+"' /><span>"+name+"   &nbsp;&nbsp;"+str[obj].gtime+"</span><span id='op'>"+str[obj].what+"</span></div>");
	    			}else{
	    				$(".msg").append("<div class='divright'><img src='/public/kefu.jpg'/><span>"+str[obj].gtime+"  &nbsp;&nbsp;客服</span><span id='op2'>"+str[obj].what+"</span></div>");
	    			}
   				};
   				$('.msg').scrollTop( $('.msg')[0].scrollHeight );
           	}
        } 
    });
}

</script>